<template>
  <div class="img-preview-box">
    <div class="img-preview-box-title">
      {{ list[currentIndex] && list[currentIndex].title ? list[currentIndex].title : '-' }}
    </div>
    <div class="img-preview-box-canvas">
      <img
        :src="list[currentIndex].url"
        v-if="list[currentIndex] && list[currentIndex].url"
        @click="imgViewerVisible = true"
      />
    </div>
    <div class="img-preview-box-list">
      <div class="img-preview-box-list-btn">
        <el-button link :disabled="currentIndex == 0" @click="previousImg">
          <DynamicIcon icon="ArrowLeftBold" />
        </el-button>
      </div>
      <HorizontalScrollPane class="img-preview-box-list-imgs" ref="scrollPaneRef">
        <template v-for="(item, index) in list">
          <div
            class="img-preview-box-list-imgs-item"
            @click="selectImg(index)"
            :ref="setImgItemRefs"
          >
            <div
              class="img-preview-box-list-imgs-item-img"
              :class="{
                'img-preview-box-list-imgs-item-img-active': index === currentIndex
              }"
            >
              <img :src="item.url" />
            </div>
          </div>
        </template>
      </HorizontalScrollPane>
      <div class="img-preview-box-list-btn">
        <el-button :disabled="currentIndex == list.length - 1" @click="nextImg" link>
          <DynamicIcon icon="ArrowRightBold" />
        </el-button>
      </div>
    </div>
    <div class="img-preview-box-list-tools">
      <div>当前显示：{{ currentIndex + 1 + '/' + list.length }}</div>
      <div class="tools-btns">
        <div
          class="tools-btn"
          @click="imgViewerVisible = true"
          title="查看大图"
          v-if="viewBtnVisible"
        >
          <DynamicIcon icon="view" />
        </div>
        <div class="tools-btn" @click="download" title="下载图片" v-if="downloadBtnVisible">
          <DynamicIcon icon="download" />
        </div>
        <slot name="tools-btns" :data="{ list, index, currentImg: list[index] }"> </slot>
      </div>
    </div>
    <el-image-viewer
      v-if="imgViewerVisible"
      :url-list="[list[currentIndex].url]"
      @close="imgViewerVisible = false"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import HorizontalScrollPane from '../scroll-pane/HorizontalScrollPane.vue'
import type { ImgPreviewBoxImg } from '../../types'
import { ImgPreviewBoxProps } from '../../props/img-preview-box-props'

const props = defineProps(ImgPreviewBoxProps)

const currentIndex = ref<number>(0)
const imgViewerVisible = ref<boolean>(false)

const imgItemRefs = ref<any>([])
const scrollPaneRef = ref<any>(null)

const setImgItemRefs = (el: any) => {
  imgItemRefs.value.push(el)
}

const previousImg = () => {
  let index = currentIndex.value
  index--
  if (index >= 0) {
    currentIndex.value = index
    moveToCurrent()
  }
}

const nextImg = () => {
  let index = currentIndex.value
  index++
  if (index <= props.list.length - 1) {
    currentIndex.value = index
    moveToCurrent()
  }
}

const moveToCurrent = () => {
  if (props.list.length == 0) {
    return
  }
  if (imgItemRefs.value[currentIndex.value]) {
    scrollPaneRef.value.moveToTarget(imgItemRefs.value[currentIndex.value])
  }
}

const selectImg = (index: number) => {
  currentIndex.value = index
  moveToCurrent()
}

const download = () => {
  const a = document.createElement('a')
  a.href = `${props.list[currentIndex.value].url}?response-content-type=application/octet-stream`
  a.click()
}

defineExpose({
  selectImg,
  nextImg,
  previousImg
})

watch(
  (): number => props.index,
  (newVal: number): void => {
    currentIndex.value = newVal
    moveToCurrent()
  },
  {
    immediate: true,
    deep: false
  }
)
</script>

<style scoped lang="scss">
@import './ImgPreviewBox.scss';
</style>
